iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

30 天利用 Hexo 打造技術部落格系列 第 18

Day 18:為你的 Hexo 部落格文章添加文章字數與所需閱讀時間

  • 分享至 

  • xImage
  •  

今天要實作的內容,能夠為自己的 Hexo 部落格文章增加提示本篇文章所需字數以及所需閱讀時間,能夠幫助讀者好掌握閱讀這篇文章大致上需要花費的時間。

安裝套件

打開終端機指定位址至 Hexo 目錄後,執行以下這段指令:

npm install hexo-symbols-count-time --save

修改 Next 設定檔

開啟 Next 佈景的 _config.yml 檔案,找到以下這段語法:

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: false # 是否獨立一行
  # 以下設定如果填 false,「文章字數:」與「所需閱讀時間 ≈ 」會以圖標呈現
  item_text_post: true # 文章
  item_text_total: true # 網頁底部

在 Hexo 設定檔新增語法

開啟 Hexo 根目錄 _config.yml 檔案,增加以下這段語法:

# count
symbols_count_time:
  symbols: true # 文章字數統計顯示
  time: true # 文章閱讀時間顯示
  total_symbols: false # 網頁底部字數統計顯示
  total_time: false # 網頁底部閱讀時間顯示
  exclude_codeblock: false # 字數統計是否排除程式碼
  awl: 4  # 平均文字長度,中文為 2, 英文為 5, 預設為 4
  wpm: 275  # 一分鐘閱讀字數
  suffix: "分鐘"

實作成果

文章(項目以文字呈現)

文章(項目以文字呈現)

文章(獨立一行呈現)

文章(獨立一行呈現)

網頁底部(項目以圖標呈現)

網頁底部(項目以圖標呈現)

參考資料

  • 忘了當初照哪一篇教學文章操作了,找到再補。

本篇文章同步發布於我的部落格 Gui Blog


上一篇
Day 17:Next 佈景客製化 - 將 Social Link 移到主選單
下一篇
Day 19:Hexo 文章分類設定小知識!你都知道了嗎?
系列文
30 天利用 Hexo 打造技術部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言